<template>
  <div id="show_message_info_box" class="FatherBrower" >
      <div v-for="(i,index) in data" :key="index" v-if="data!=undefined&&data.length!=0">
            <div class="list_item" @click="show_info(i)">
                  <div class="title">
                    标题:  {{i.title}} 
                  </div>
                  <div class="meta">  
                    <div class="sender">发送者: {{i.sender_info}}</div>
                    <div class="date">时间: {{i.date}}</div>
                  </div>
            </div>
            
      </div>
      <div v-else>
          <div  style="text-align: center;margin-top: 2px;">暂无数据</div>
      </div>
      <div class="brower-box" ref="BrowerBox"></div>
  </div>
</template>

<script setup>
import { defineModel, nextTick, onBeforeUnmount, onMounted, ref, defineEmits, inject } from 'vue'
import { del_message_no_response }from "@/api/chat/user_behavior"
let BrowerBox= ref(null)
let FatherBrower=ref(null)
const data = defineModel('lisdata')
const chat=inject('chat')()
const show_info = (data) => { 
  // 创建内容元素
  const container = document.querySelector('#show_message_info_box');
  const contentElement = document.createElement('div');
  contentElement.classList.add('content-info'); // 使用类名来处理样式
  
  // 填充内容
  contentElement.innerHTML = `
    <div class="card-header" id="${data.id}">
      <h2 class="show_title">${data.title}</h2>
      <button class="delete-button">删除</button>
    </div>
    <div class="card-body">
      <p class="show_content">${data.content}</p>
    </div>
    <div class="card-footer">
      <div class="meta-info">
        <p class="show_date">${data.date}</p>
        <p class="show_sender-info">${data.sender_info}</p>
      </div>
    </div>
  `; 
 
  // 检查是否已经存在内容元素
  const existingContent = container.querySelector('.content-info');
  if (existingContent) {
    // 如果存在，则删除
    if (existingContent.querySelector('.card-header').getAttribute('id') == data.id) {
      container.removeChild(existingContent);
      return;
    } else { 
      container.removeChild(existingContent);
    }
  }
  
  // 更新 DOM
  container.appendChild(contentElement);
  contentElement.setAttribute('id',`${data.id}`)
 
  container.addEventListener('click', async (e) => {
    const deleteButton = e.target.closest('.delete-button');
    if (!deleteButton) {
      return;
    }
 
    try {
      const judge = await del_message_no_response(data.user_id, data.id);
      if (judge != 0) {
        const contentToRemove = container.querySelector(`.content-info[id="${data.id}"]`);
        if (contentToRemove) {
           container.removeChild(contentToRemove);
        }
        chat.value.pop_no_response_message(data.id);
      }
    } catch (error) {
      
    }
  });
};


const EMIT=defineEmits(['load_more'])
const init_brower = () => {
    const target = BrowerBox.value
    if (!target) return;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          EMIT('load_more')
        }
      });
    }, {
      root: FatherBrower.value,
      rootMargin: '0px',
      threshold: 0.1
    });
    
    observer.observe(target);
}
onMounted(async () => {
  await nextTick()
  init_brower()
})
  
onBeforeUnmount(() => {
  try {
    const container = document.querySelector('#show_message_info_box')
    const existingContent = container.querySelector('.content-info');
    if (existingContent) {
        container.removeChild(existingContent);
    }
 
  }
  catch { 
    
  }
 })
</script>

<style scoped>
.list_item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 5px; 
  height: 50px;
  background-color: rgba(205, 252, 228, 0.15);
  margin-top: 2px;
  border-radius: 8px;
}

.meta {
  display: flex;
  align-items: center; 
  gap: 5px; 
  font-size: 12px;
}

.title {
  font-size: 14px; 
  font-weight: 800;  
  width: 80%;
  white-space:nowrap;
  overflow: hidden;       
  text-overflow: ellipsis;

}
.sender{
  width: 40%;
  white-space:nowrap;
  overflow: hidden;       
  text-overflow: ellipsis;
  padding-left: 10px;
}

.date {
  opacity: 0.8; 
  white-space:nowrap;
  overflow: hidden;       
  width: 60%;
}

::v-deep(.content-info) {
  position: fixed;
  top: 250px;
  left: 50%;
  width: 500px;
  margin-left: calc(-250px);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  overflow: hidden; 
  animation: fadeInUp 0.4s 0.2s ease-out forwards; opacity: 0; 
  background: linear-gradient(135deg, #ccbedd, #d0daec);
  z-index: 101;
}

::v-deep(.card-header) {
  padding: 20px 25px 15px;
  border-bottom: 1px solid #eee;
  display:flex;
  justify-content: space-between;
}
::v-deep(.delete-button){
  border-radius: 5px;
  width: 50px;
  border: none;
  background-color:aquamarine ;
  opacity: 0.8;
  color:#515a6e
}
::v-deep(.delete-button:hover){
  background-color: #19be6b;
  color:white
}
::v-deep(.card-header)

::v-deep(.card-body) {
  padding: 25px;
  line-height: 1.6;
}

::v-deep(.card-footer) {
  padding: 15px 25px;
  border-top:dashed 1px black;
}

::v-deep(.meta-info) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep(.show_title) {
  font-size: 1.5em;
  margin: 0;
  color:#17233d;
  user-select: none;
}

::v-deep(.show_content ){
  margin: 0 0 10px;
  padding: 5px;
}

::v-deep(.show_date) {
  font-size: 0.85em;
  margin: 0;  
  user-select: none;
}

::v-deep(.show_sender-info) {
  font-size: 0.85em;
  margin: 0;
  font-style: italic;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>